/* 公共样式 */
.clearfix:after,
.clearfix:before{
	content:" ";
	display:table
}
.clearfix:after{
	clear:both
}

.layout{
    width: 1100px;
    margin: 0 auto;
}


/* loading */
.loading {
	// display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 280;
	padding-top: 20%;
	text-align: center;
	background: #333;
}

.loading > div {
  width: 20px;
  height: 20px;
  background-color: #eca010;
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
  animation: bouncedelay 1.4s infinite ease-in-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
 
.loading .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
 
.loading .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
@-webkit-keyframes bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0.0) }
  40% { -webkit-transform: scale(1.0) }
}
 
@keyframes bouncedelay {
  0%, 80%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 40% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}


@keyframes ledLight {
  0%, 80%, 100% { 
    opacity: 0;
  } 40% { 
    opacity: 1;
  }
}

@keyframes mouseAn {
  0%, 80%, 100% { 
    transform: translate(0,8px);
  } 40% { 
    transform: translate(0,0);
  }
}




.wrap{
	// position: relative;
	// margin: 0 auto;
	// width: 1200px;
	// height: 100%;
}


.main{
    position: relative;
   width: 100%;
}


.single-slide{
    width: 100%;
}

.icon-mouse{
  position: absolute;
  left: 50%;
  bottom: 5px;
  z-index: 50;
  margin-left: -18px;
  width: 165px;
  height: 38px;
  background: url(../images/icon-down.png) no-repeat;
  animation: mouseAn 1.4s infinite ease-in-out;
}


.banner{
  position: relative;
  overflow: hidden;

  .banner-bg{
    height: 100%;
    background: url(../../images/banner.jpg) center no-repeat;
    background-size: cover;
  }

  h1,h2{
    position: absolute;
    top: 0;
    left: 0;
    width: 180px;
    height: 60px;
    text-indent: -9999px;
    background: url(../../images/logo.png) center no-repeat;
  }
  h2{
    left: auto;
    right: 0;
    width: 100px;
    height: 50px;
    background-image: url(../../images/logo2.png);
  }

  .img{
    position: absolute;
    top: 0;
    left: 0;
    width: 69%;
    height: 100%;
    background: url(../../images/banner_pic_02.png) left bottom no-repeat;
    background-size: 100% auto;
  }
  .img2{
    z-index: 2;
    width: 27.5%;
    background-image: url(../../images/banner_pic_03.png);
  }

  .pic{
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
    width: 36%;
    height: 100%;
    background: url(../../images/banner_pic.png) right bottom no-repeat;
    background-size: 100% auto;
  }

  .btn{
    position: absolute;
    left: 50%;
    bottom: 1%;
    margin-left: -92px;
    width: 185px;
    height: 50px;
    text-indent: -9999px;
    background: url(../../images/icon_down.png) center no-repeat;
  }
}


.slide1{
  position: relative;
  background: url(../../images/slide1.jpg) bottom center no-repeat;
  width: 100%;
  overflow: hidden;
 
  h1,h2{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 180px;
    height: 60px;
    text-indent: -9999px;
    background: url(../../images/logo.png) center no-repeat;
  }
  h2{
    left: auto;
    right: 0;
    width: 100px;
    height: 50px;
    background-image: url(../../images/logo2.png);
  }

  .box{
    position: relative;
    height: 100%;

    .item{
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 100%;
      background: url(../../images/slide01_01.png) bottom center no-repeat;
      background-size: cover;
    }
    .item2{
      z-index: 2;
      background-image: url(../../images/slide01_02.png);
    }
    .item3{
      z-index: 3;
      background-image: url(../../images/slide01_03.png);
    }
    .item4{
      z-index: 4;
      background-image: url(../../images/slide01_04.png);
    }
    .item5{
      z-index: 5;
      background-image: url(../../images/slide01_05.png);
    }
    .item6{
      z-index: 6;
      background-image: url(../../images/slide01_06.png);

      div{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 100%;
        background: url(../../images/led1.png) bottom center no-repeat;
        background-size: cover;

        animation: ledLight 1.4s infinite ease-in-out;
      }
      .led2{
        background-image: url(../../images/led2.png);

        animation-delay: .5s;
      }
      .led3{
        background-image: url(../../images/led3.png);
        animation-delay: 1s;
      }
      .led4{
        background-image: url(../../images/led4.png);
        animation-delay: 1.5s;
      }
      .led5{
        background-image: url(../../images/led5.png);
        animation-delay: 2s;
      }
      .led6{
        background-image: url(../../images/led6.png);
        animation-delay: 2.5s;
      }
      .led7{
        background-image: url(../../images/led7.png);
        animation-delay: 3s;
      }
      .led8{
        background-image: url(../../images/led8.png);
        animation-delay: 3.5s;
      }
    }
  }
}
//
//@media screen and (max-width:1180px){
//.single-slide{
//  // max-height: 740px;
//}
//
//.slide1{
//    position: relative;
//  .box{
//    .item2{
//      background-image: url(../../images/slide01_02.png);
//    }
//  }  
//}
//}
//
//@media screen and (max-width:1050px){
//.single-slide{
//  // max-height: 640px;
//}
//.slide1{
//  .box{
//    .item2{
//      background-image: url(../../images/slide01_02.png);
//    }
//  }
//}
//}

.warp-cont{
      background: url(../../images/background_02.jpg) top center no-repeat;
}

.hd{
        margin-bottom: 20px;
        width: 185px;
        h2{
            font-size: 32px;        
            border-bottom: 1px dotted #fff;
        }
        p{
            font-size: 22px;
            color: #fff;      
        }  
    }

.slide2{
  position: relative;
  width: 100%;
  overflow: hidden;
  z-index: 10;
  height: 100%; 
  padding-top: 50px;
  .car{
    position: absolute;
    left: 0;
    bottom: 40px;
    width: 467px;
    img{
      display: block;
      width: 467px;
      height: 202px;
    }
  }

  .center{
    position: absolute;
    top: 54%;
    left: 47%;
  }

  .txt{
    position: absolute;
    top: -340px;
    left: 60px;
    width: 445px;
    height: 410px;
    z-index: 20;
    .t{
      height: 60px;
      background: url(../../images/jihua.png) top center no-repeat;
    }
    .t2{
      height: 170px;
      background-position: 0px -75px;
    }
    .t3{
      height: 170px;
      background-position: 0px -245px;
    }
  }
  
  .txt-list{
      position: absolute;
      top: 55px;
      left: -140px;
       p{
              color: #fff;
          }
      h2{
          color: #FF7100;
          font-size: 24px;
          position: absolute;
          top: 7px;
          left: 75px;
      }
      .list{
          position: relative;
          width: 745px;
          height: 125px;       
          background: url(../../images/jiangp_01.png) no-repeat;
         
          .deliel{
            position: absolute;
            top: 55px;
            left: 80px;
          }
          .deliel1{             
              position: absolute;
              top: 80px;
              left: 80px;
              span{
                  float: left;
                  display: inline-block;
                  line-height: 1.6;            
              }
              .span{
                  width: 400px;
              }
          }
      }
      .list1{
          position: relative;
          margin-top: 10px;
          width: 745px;
          height: 125px;
          background: url(../../images/jinagp2.png) no-repeat;
         p{
             position: absolute;
            left: 80px;
            top: 10px;
             width: 285px; 
         }
      }
      
  }

  .form-main{
    position: absolute;
    top: -367px;
    left: -445px;
    width: 310px;
    color: #fff;    
    table{
      width: 100%;
    }
    th{
      font-size: 38px;
      font-weight: bold;
    }
    td{
      height: 36px;
      font-size: 16px;
    }
    .td-l{
      width: 95px;
      white-space: nowrap;
    }

    .in-txt,
    .in-sel{
      padding: 3px 5px;
      width: 192px;
      height: 17px;
      font-size: 14px;
      background: #fff;
      border: none;
    }
    .in-sel{
      padding: 0 5px;
      width: 98px;
      height: 23px;
    }
    .in-sel-p{
      width: 202px;
    }

    .btn{
      display: block;
      margin-top: 10px;
      width: 135px;
      height: 46px;
      line-height: 46px;
      text-align: center;
      font-size: 16px;
      color: #8a4019;
      background: #fff;
      border-radius: 5px;
    }
  }
}


.story{
    position: relative;
    margin-top: 20px;
    .hd{
        margin: 10px 50px;
        width: 135px;
        h2{
            color: #fff;
        }
    }
    .story-list{
       float: left;
       margin-right: 20px;
       .list1,.list2{
           position: relative;
           width: 481px;
           height: 235px;
           p{
               width: 100%;
               background: #333;
               color: #fff;
               position: absolute;
               bottom: 0;
               text-align: center;
               opacity: 0.8;
               filter:alpha(opacity=80);
           }
       }
    }
    .list3{
           position: relative;
           float: left;
           width: 488px;
           height: 197px;
           .txt{
              position: absolute;
              top: 30px;
              left: 25px;
              h3,p{
                  color: #fff;
              }
              h3{
                 font-size: 18px; 
              }
              p{
                  width: 440px;
                  font-size: 12px;
              }
           }
           span{
               display: block;
              position: absolute;
              top: 30px;
              left:0;
              width: 488px;
             height: 140px;
              background: #333;
              opacity: 0.6;
              filter:alpha(opacity=60); 
           }
           .story-btn{
               padding-left: 20px;
               background: url(../../images/btn.png) no-repeat;
           }
       }
    .car{
        display: none;
        position: absolute;
        right: 0;
        bottom: 0;
        width: 467px;
        img{
          display: block;
          width: 467px;
          height: 202px;
        }
    }
}

.photos{
    position: relative;
    height: 646px;
    .hd{
        margin: 40px 50px;
        width: 135px;
        h2{
            color: #fff;
            border-bottom-color: #FF7100;
        }
        p{
            color: #FF7100;
        }
        
    }
    .tabs{
        position: absolute;
        right: 135px;
        top: 60px;
        height: 480px;
        .tab{
            margin-bottom: 2px;
            border-bottom: 2px solid #FF7100;
            span{
                display: inline-block;
                padding: 0 35px;
                background: #ccc;
                color: #fff;
                cursor: pointer;
            }
            .on{
                background: #FF7100;
            }
        }
        .tab-list{
            margin-top: 2px;
            li{
                height: 146px;
                a{
                    display: block;
                    float: left;
                    height: 146px;
                }
                a:hover{
                    background-color: #ECA010;
                    opacity: 0.8;
                    filter:alpha(opacity=80);
                }
            }
        }
    }
}

.hide{
    display: none;
}

.footer{
  // height: 110px;
  background: #ff7100;
  text-align: center;
  color: #FFF;
  padding: 10px 0;
  .link{
    a,i{
      font-size: 16px;
      color: #fff;
    }
    i{
      padding: 0 10px;
    }
  }
  .crp{
    p{
      font-size: 12px;
      color: #fff;
    }
  }
}


.yuyue-btn{
  position: fixed;
  left: 2%;
  bottom: 0;
  z-index: 100;
  width: 137px;
  height: 92px;
  background: url(../images/yuyue_btn_bg.png) no-repeat;

  a{
    transform: translateZ(0);
    display: block;
    height: 100%;
    text-indent: -999px;
    background: url(../images/yuyue_btn_txt1.png) center no-repeat;

    animation: yuyueBtnAn 2s infinite;
  }
  // .a2{
  //   background-position: center;
  // }
  // .a3{
  //   background-position: right center;
  // }
}


@keyframes yuyueBtnAn {
  0%, 90%, 100% { 
    background-image: url(../images/yuyue_btn_txt1.png);
  } 40% { 
    background-image: url(../images/yuyue_btn_txt2.png);
  }
}